<template>
	<view style="padding-bottom: 90px;">
		<view class="backBox"></view>
		<navNav :navobj="navobj"></navNav>
		<scroll-view style="background-color:#fff; height: 100vh;width: 750rpx;margin: 0 auto;" scroll-y="true" refresher-enabled="true" refresher-background="#fff" >
		
		<view class="userBox">
			<view style="display: flex;align-items: center;">
				<view class="avatarBox">
					<image mode="aspectFill" :src="user.avatar?user.avatar:'../../static/img/home/exp.jpg'" class="img"></image>
				</view>
				<view style="display: flex;flex-direction: column;">
					<view style="display: flex;align-items: center;">
						<view class="nick" >{{user.nickName}}</view>
						<view style="margin-left: 10rpx; background-color: red;border-radius: 10rpx;color: #fff; font-size: 24rpx;font-weight: bold;padding: 6rpx 16rpx;box-sizing: border-box;">{{user.roles[0].roleName}}</view>
					</view>
					
					<view class="id">ID:{{user.userId}}</view>
				</view>
			</view>
			<view @click="navTo('/pages-user/useredit/useredit')" class="edit">
				个人资料
			</view>
		</view>
		<view class="numBox">
			<view class="item" @click="navTo('/pages-user/balance/balance')">
				<view class="num">{{balance.balance}}</view>
				<view class="name">余额</view>
			</view>
			<view class="item" @click="navTo('/pages-user/coupon/coupon')">
				<view class="num">{{balance.couponNum}}</view>
				<view class="name">优惠卷</view>
			</view>
			<view class="item" >
				<view class="num">{{balance.points}}</view>
				<view class="name">积分</view>
			</view>
		</view>

		<view class="vipBox" v-if="balance">
			<view class="flex_column_center_start">
				<view class="title">VIP特权{{balance.card ? vip : ''}}</view>
				<view class="tips">开通即享会员id:{{balance.card ?balance.card.id : 0}}</view>
			</view>
			<view class="vipButton" @click="navTo('/pages-user/vip/vip')">
				开通
			</view>
		</view>
 
		<view class="actList">
			<view class="item" @click="navTo('/pages-user/address/address')">
				<view style="display: flex;align-items: center;" class="flex_row_center_center">
					<image class="img" src="../../static/img/user/dizhi.png"></image>
					<view class="name">我的地址</view>
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
			</view>
			<view class="item" @click="navTo('/pages-user/safe/safe')">
				<view  style="display: flex;align-items: center;" class="flex_row_center_center">
					<image class="img" src="../../static/img/user/anquan.png"></image>
					<view class="name">安全中心</view>
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
			</view>
			<view class="item" @click="navTo('/pages-user/feedback/feedback')">
				<view  style="display: flex;align-items: center;" class="flex_row_center_center">
					<image class="img" src="../../static/img/user/fankui.png"></image>
					<view class="name">反馈问题</view>
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
			</view>
			<view class="item">
				<button open-type="contact" class="buttonkf" bindcontact="handleContact">
				<view  style="display: flex;align-items: center;" class="flex_row_center_center">
						<image class="img" src="../../static/img/user/kefu.png"></image>
						<view class="name">客服中心</view>
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
				</button>
			</view>
			<view class="item" @click="toSetting">
				<view  style="display: flex;align-items: center;" class="flex_row_center_center">
					<image class="img" src="../../static/img/user/shezhi.png"></image>
					<view class="name">设置</view>
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
			</view>
		</view>

		<view class="actList">
			<view class="item" @click="open">
				<view  style="display: flex;align-items: center;" class="flex_row_center_center">
					<image class="img" src="../../static/img/user/dianpu.png"></image>
					<view class="name">申请分销商</view>
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
			</view>
		</view>
		<view class="actList">
			<view class="item" @click="qiehuan">
				<view style="display: flex;align-items: center;" class="flex_row_center_center">
					<image class="img" src="../../static/img/user/shifu.png"></image>
					<view class="name">切换师傅</view>
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
			</view>
		</view>

		<!-- <view class="actList">
			<view class="item" @click="open">
				<view class="flex_row_center_center">
					<image class="img" src="../../static/img/user/shifu.png"></image>
					<view class="name">成为师傅</view>
				</view>
				<uni-icons class="icon" type="right"></uni-icons>
			</view>
		</view> -->
		<view style="height: 200rpx;"></view>
		</scroll-view>

	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {userStore} from '@/store/user.js'//引入空间
	const userStores = userStore()//给空间命名
	const {user,balance} = storeToRefs(userStores);//解构数据
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
				title:'用户中心',
				image:false
	})
	const vip =ref('')
	
				
			
	onMounted(()=>{
		console.log('user',user);
		userStores.getUser()
		if(balance.card!=null){
			vip.value = balance.card.type.name
		}
		
	})
			
	const open=()=> {
		proxy.$showToast( '功能开放中')
	}
	const navTo=(url)=> {
		uni.navigateTo({
			url: url
		})
	}
	const toSetting=()=> {
		uni.navigateTo({
			url: '/pages-user/setting/setting'
		})
	}
	const qiehuan=()=>{
		uni.showModal({
			title: '确定切换师傅端吗？',
			content: '',
			success: function(res) {
				if (res.confirm) {
					uni.clearStorageSync();
					uni.reLaunch({
						url: '/pages-shifu/login/passwordlogin'
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
	
		
</script>

<style lang="scss" scoped>
	.actList {
		background-color: white;
		margin: 10px 20px;
		border-radius: 10px;
		padding: 10px 0;
		

		.item {
			padding: 15px 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.buttonkf {
				border: none !important;
				background-color: white !important;
				padding: 0px !important;
				line-height: normal !important;
				margin: 0px !important;
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;

			}

			.buttonkf::after {
				border: none !important;
			}

			.img {
				width: 20px;
				height: 20px;
				margin-right: 5px;
			}

			.name {
				font-weight: bold;
				font-size: 15px;
			}

			.icon {
				font-weight: bold;
			}
		}
	}

	/* vip特权 开通即享 年卡 月卡 日卡  */
	@font-face {
		font-family: "阿里妈妈数黑体";
		font-weight: 700;
		src: url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/u2s9oRCYrXej.woff2") format("woff2"),
			url("//at.alicdn.com/wf/webfont/Z6NGK12PNmYL/c9p30e8RcqIp.woff") format("woff");
		font-display: swap;
	}

	.vipBox {
		background: linear-gradient(301deg, #000000 0%, #2F2F2F 100%);
		margin: 20px;
		border-radius: 10px;
		padding: 10px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;


		.title {
			background: linear-gradient(0deg, #FDE997 0%, #FFECA2 100%);
			-webkit-text-fill-color: transparent;
			-webkit-background-clip: text;
			font-family: '阿里妈妈数黑体';
			font-size: 20px;
		}

		.tips {
			background: linear-gradient(0deg, #FDE997 0%, #FFECA2 100%);
			-webkit-text-fill-color: transparent;
			-webkit-background-clip: text;
			font-size: 14px;
			font-family: '阿里妈妈数黑体';
		}

		.vipButton {
			background: linear-gradient(117deg, #FFEF79 0%, #FFF8C6 100%);
			color: #9E7E00;
			font-family: '阿里妈妈数黑体';
			padding: 5px 20px;
			border-radius: 20px;
		}
	}

	.numBox {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10px 40rpx;
		position: relative;
		z-index: +1;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 33%;

			.num {
				font-weight: bold;
				font-size: 19px;
			}

			.name {
				text-align: center;
				font-size: 15px;
			}
		}
	}

	.backBox {
		background: linear-gradient(90deg, rgba(224, 226, 176, 0.3) 0%, rgba(197, 255, 251, 0.3) 57%, rgba(252, 223, 79, 0.3) 94%);
		width: 100vw;
		height: 30vh;
		position: absolute;
		top: 0px;
		filter: blur(80px);
	}

	.userBox {
		position: relative;
		z-index: +10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;width: 690rpx;height: 120rpx;

		.avatarBox {
			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 100%;
				margin-right: 20rpx;
			}
		}

		.nick {
			font-weight: bold;
			max-width: 200rpx;
			
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 10rpx;
		}

		.id {
			font-size: 14px;
			color: $grey;
			margin-top: 5px;
		}

		.edit {
			background: $linerBlue;
			color: #fff;
			padding: 10rpx 20rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
</style>